<template>
  <el-dialog v-model="dialog.visible" width="80%" :title="dialog.title">
    <avue-crud
        v-if="tableOption"
        v-bind="bindVal"
        v-on="onEvent"
        v-model:page="page"
        v-model="startForm">
    </avue-crud>
    <sys-user-select-dialog ref="sysUserSelectDialog" @submit="confirmSelectUsers"></sys-user-select-dialog>
  </el-dialog>
</template>
<script>
import {createDynamicMixin} from "@/mixins/startCrud";
import startCrudTools from "@/mixins/startCrudTools";
import avueDataAdapter from "utils/avueDataAdapter";
import roleUserApi from "@/api/sys/roleUserApi";
import SysUserSelectDialog from "components/start-components/startSelectUser/sysUserSelectDialog.vue";

const option = {
  name: "sys/user",
  apiPath: 'sys/roleUser',
  list: 'list'
}

export default {
  name: 'roleUserDialog',
  components: {SysUserSelectDialog},
  mixins: [createDynamicMixin(option)],
  data() {
    return {
      dialog: {
        title: '',
        visible: false,
      },
      roleModel: null,
    }
  },
  methods: {
    loadCrudOptionBefore(option) {
      option.editBtn = false
    },
    show(row) {
      this.roleModel = row;
      this.dialog.title = '角色【' + row.roleName + '】的用户'
      this.dialog.visible = true;
      this.loadRemoteDataSources();
    },
    loadRemoteDataSources() {
      this.loading = true;
      this.dataSource = [];
      let pageParams = {}
      pageParams[option.current || 'current'] = this.page.currentPage
      pageParams[option.size || 'size'] = this.page.pageSize;
      let searchParams = startCrudTools.getSearchParams(this.searchParams, this.columnsMap);
      const requestData = Object.assign({}, pageParams, this.searchParams, searchParams)
      roleUserApi.list(this.roleModel.id, requestData).then(res => {
        let data = res.data.data;
        let tempDataList = data[option.data || 'records'];
        this.page.total = data[option.total || 'total'];
        avueDataAdapter.transformDataList(this.tableOption.column, tempDataList)
        this.dataSource = tempDataList;
      }).finally(() => this.loading = false)

    },
    beforeOpenAddDialog() {
      this.$refs.sysUserSelectDialog.show()
    },
    confirmSelectUsers(users, done) {
      if (users.length < 1) {
        this.$message.error("至少选择一个用户")
        return
      }
      let model = {};
      model.roleId = this.roleModel.id;
      model.userIds = users.map(e => e.id)
      this.$confirm(`您确定要将用户【${users.map(e => e.nickName).toString()}】添加【${this.roleModel.roleName}】角色吗？ 是否继续?`, '系统提示', {
        confirmButtonText: '是', cancelButtonText: '否', type: 'warning'
      }).then(() => {
        return roleUserApi.saveRoleUser(model)
      }).then(res => {
        done()
        this.loadRemoteDataSources()
        this.$message.success('删除成功')
      }).catch(e => {

      })
    },
    rowDel(row, index) {
      let userIds = [];
      userIds.push(row.id)
      let model = {}
      model.roleId = this.roleModel.id;
      model.userIds = userIds
      this.$confirm(`您确定要将用户【${row.nickName}】移除【${this.roleModel.roleName}】角色！ 是否继续?`, '系统提示', {
        confirmButtonText: '是', cancelButtonText: '否', type: 'warning'
      }).then(() => {

        return roleUserApi.deleteRoleUserId(model)
      }).then(res => {
        this.loadRemoteDataSources()
        this.$message.success('删除成功')

      }).catch(e => {

      })
    }

  }

}

</script>
<style scoped>

</style>